<template>
  <div id="menu">
    <el-row>
      <el-col :span="12">
        <el-menu
          :default-active="menuFlag"
          class="el-menu-vertical-demo"
          active-text-color="rgba(3,167,128,1)"
          @select="menuSelect"
          :default-openeds="openeds"
        >
          <el-submenu v-for="(item,index) in menuList" :key="index" :index="item.id.toString()">
            <template slot="title">
              <i class="el-icon-menu"></i>
              {{item.name}}
            </template>
            <el-menu-item
              style="width:209px;border-right:1px solid #eee;"
              :key="j"
              :index="i.id.toString()"
              v-for="(i,j) in item.children"
              @click="toMenu(i.id, j)"
            >{{i.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: ["menuList", "menuFlag"],  
  components: {},
  inject:['reload'],
  data() {
    return {
      openeds: [1],
    };
  },
  methods: {
    toMenu(id, index) {
      //id判断每个菜单所显示内容
      this.$emit("handleMenu", id.toString(), index);
      // this.reload()
    },
    menuSelect(index, indexPath) {},
  },
};
</script>

<style scoped>
</style>
